<template>
    <video id="video" style="width: 100%; height: 100%; object-fit: fill" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" data-setup='{"fluid": true}' preload="auto">
        <source :src="url" type="video/mp4" />
    </video>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";

export default {
    props: {
        url: {
            type: String,
            default: "https://vjs.zencdn.net/v/oceans.mp4",
        },
    },

    data() {
        return {
            player: null,
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            // 播放器初始化
            this.$nextTick(() => {
                this.player = videojs(
                    "video",
                    {
                        bigPlayButton: false,
                        textTrackDisplay: false,
                        posterImage: true,
                        errorDisplay: false,
                        controlBar: false,
                        muted: true, //静音模式 、、 解决首次页面加载播放。
                        autoplay: true,
                    },
                    function () {
                        this.play(); // 自动播放
                    }
                );
            });
        },
    },
    // 离开页面销毁视频播放器
    beforeDestroy() {
        if (this.player != null) {
            this.player.dispose(); // dispose()会直接删除Dom元素
        }
    },
};
</script>
<style scoped></style>
